<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>多列 和 用户自定义页面 和 css变量的使用</title>
		<style type="text/css">
			/* 定义要的css变量 */
			:root{
				--mycolor:#3adeba;
			}
			#d1 {
				margin: 100px auto;
				width: 300px;
				height: 200px;
				border: 1px solid red;
				border-color: var(--mycolor);
				overflow: hidden;
				column-count: 2;
				column-gap:15px;
				column-rule: 2px dashed red;
				/* 用户界面自行重新调整 */
				/* resize: both; */
				resize: horizontal;
				/* resize: vertical; */
				outline: 4px dotted var(--mycolor);
				outline-offset: 20px;
				
			}
		</style>
	</head>
	<body>
		<div id="d1">
			本文用示例介绍CSS的过渡与动画中的贝塞尔曲线的用法。
			cubic-bezier又称三次贝塞尔曲线，这是一个函数，可以生成速度曲线。
			贝塞尔曲线主要用于transition（过渡效果）和animation（动画效果）。
			本文用示例介绍CSS的过渡与动画中的贝塞尔曲线的用法。
			cubic-bezier又称三次贝塞尔曲线，这是一个函数，可以生成速度曲线。
			贝塞尔曲线主要用于transition（过渡效果）和animation（动画效果）。
			本文用示例介绍CSS的过渡与动画中的贝塞尔曲线的用法。
			cubic-bezier又称三次贝塞尔曲线，这是一个函数，可以生成速度曲线。
			贝塞尔曲线主要用于transition（过渡效果）和animation（动画效果）。
		</div>
	</body>
</html>
